<template>
  <!-- 类型及题号 -->
  <div class="topic_type">
    <div class="type">{{ testType }}</div>
    <div class="qid">
      <span>{{ store.state.topic.status.topicIndex }}</span
      >/{{ testList?.length }}
    </div>
  </div>
</template>

<script>
import { inject, ref, watchEffect } from "@vue/runtime-core";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    // 数据接收
    const testList = inject("testList");
    // 监听题型
    const testType = ref("单项选题");
    watchEffect(() => {
      let type = testList.value[store.state.topic.status.topicIndex - 1]?.type;
      testType.value =
        type === "one" ? "单项选题" : type === "more" ? "多项选题" : "判断题";
    });

    return { store, testList, testType };
  },
};
</script>

<style lang="less" scoped>
.topic_type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2rem;
  padding: 0 0.5rem;
  box-sizing: border-box;
  font-size: 0.9rem;
  letter-spacing: 0.2rem;
  color: #656363;
  .type {
    border-bottom: 1px solid red;
  }
  .qid span {
    color: red;
  }
}
</style>
